<!--进站接口-->
<template>
  <div class="node-mes-config">
    <el-tabs v-model="mesActiveName">
      <el-tab-pane label="业务参数" name="base">
        <el-form
            :model="MiFindCustomAndSfcData"
            size="mini"
            label-width="100px"
            label-position="left"
        >
          <el-form-item label="SFC" width="120px">
            <data-source-input
                :node-id="MiFindCustomAndSfcData.SFCDatasourceNodeId"
                :param-name="MiFindCustomAndSfcData.SFC"
                @change="onSFCChange"
                null-message="请选择SFC来源"
                style="max-width: 600px;width: 500px;margin-left: 6px"
            />
          </el-form-item>
          <el-form-item label="客户码" width="120px">
            <data-source-input
                :node-id="MiFindCustomAndSfcData.inventoryDatasourceNodeId"
                :param-name="MiFindCustomAndSfcData.inventory"
                style="max-width: 600px;width: 500px;margin-left: 6px"
                @change="onInventoryChange"
            />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
                v-model="MiFindCustomAndSfcData.Desc"
                type="textarea"
                :rows="3"
                placeholder="请输入描述"
                style="width: 90%"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="基础参数" name="requestParams">
        <base-params-form></base-params-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi'
import Utils from '../../../../utils/Common'
import { AppParams } from '@/utils/appParams'
import NodeConfigMixin from '../../../../libs/NodeConfigMixin'
import BaseParamsForm from './BaseParamsForm.vue'
import DataSourceInput from '../../components/NodeInputSourceDataComponent.vue'

export default {
  components: { BaseParamsForm, DataSourceInput },
  mixins: [NodeConfigMixin],
  name: 'MiFindCustomAndSfcDataDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      mesActiveName: 'base',
      optionDrivers: [],
      dataType: ['', 'NUMBER', 'TEXT'],
      optionAddress: [],
      nodeInputParamsMixin: [],
      MiFindCustomAndSfcData: {
        SFC: null,
        SFCDatasource: null,
        SFCDatasourceNodeId: null,
        inventory: null,
        inventoryDatasourceNodeId: null,
        inventoryDatasource: null,
        NodeId: true,
        Desc: null
      }
    }
  },
  methods: {
    ShowNodeData () {
      const _node = this.currentClickNodeMixin
      this.SetFormValue(_node)
    },
    /**
     * 设置回显的表单数据
     * @param _node
     * @constructor
     */
    SetFormValue (_node) {
      if (!Utils.IsEmpty(_node.nodeInputParam) && !Utils.IsEmpty(_node.nodeInputParam.NodeMes) && !Utils.IsEmpty(_node.nodeInputParam.NodeMes.DataSources)) {
        const DataSources = _node.nodeInputParam.NodeMes.DataSources
        const from = {}
        for (const dataSource of DataSources) {
          if (dataSource.TargetParamName === AppParams.PARAM_NAME.SFC) {
            from.SFC = dataSource.ParamName
            from.SFCDatasource = dataSource.DataSource
            from.SFCDatasourceNodeId = dataSource.DataSourceId
          }
          if (dataSource.TargetParamName === AppParams.PARAM_NAME.INVENTORY) {
            from.inventory = dataSource.DataSourceId + dataSource.ParamName
            from.inventoryDatasource = dataSource.DataSource
            from.inventoryDatasourceNodeId = dataSource.DataSourceId
          }
        }
        from.Desc = _node.nodeInputParam.Desc
        from.id = _node.id
        this.MiFindCustomAndSfcData = from
      }
    },
    /**
     * 选中的值
     * @param item
     */
    onSFCChange (item) {
      if (!Utils.IsEmpty(item)) {
        this.MiFindCustomAndSfcData.SFCDatasourceNodeId = item.nodeId
        this.MiFindCustomAndSfcData.SFC = item.ParamName
        this.MiFindCustomAndSfcData.SFCDatasource = item.DataSource
      }
    },
    onInventoryChange (item) {
      this.MiFindCustomAndSfcData.inventoryDatasourceNodeId = null
      this.MiFindCustomAndSfcData.inventory = null
      this.MiFindCustomAndSfcData.inventoryDatasource = null
      if (!Utils.IsEmpty(item)) {
        this.MiFindCustomAndSfcData.inventoryDatasourceNodeId = item.nodeId
        this.MiFindCustomAndSfcData.inventory = item.ParamName
        this.MiFindCustomAndSfcData.inventoryDatasource = AppParams.DATA_SOURCE_TYPE.NODE
      }
    },
    /**
     * 初始化节点数据
     * @constructor
     */
    InitNodeData (DataSourceId) {
      this.optionDrivers = this.$store.getters.driver
      this.onChange(DataSourceId)
    },
    /**
     * 保存配置
     */
    _SaveNode (NodeName) {
      const _mes = this.MiFindCustomAndSfcData
      const params = {
        NodeMes: {
          DataSources: [{
            DataSource: _mes.SFCDatasource,
            DataSourceId: _mes.SFCDatasourceNodeId,
            ParamName: Utils.replaceAll(_mes.SFC, _mes.SFCDatasourceNodeId, ''),
            TargetParamName: AppParams.PARAM_NAME.SFC
          }]
        },
        Desc: _mes.Desc
      }
      if (!Utils.IsEmpty(_mes.inventoryDatasourceNodeId)) {
        params.NodeMes.DataSources.push({
          DataSource: _mes.inventoryDatasource,
          DataSourceId: _mes.inventoryDatasourceNodeId,
          ParamName: Utils.replaceAll(_mes.inventory, _mes.inventoryDatasourceNodeId, ''),
          TargetParamName: AppParams.PARAM_NAME.INVENTORY
        })
      }
      const dd = new FlowNodeDataApi().Install(this.currentClickNodeMixin.id, params, NodeName)
      this.$store.commit('NodeParams/SET_DRIVER', dd)
      // this.handleCloseMesMiFindCustomAndSfcDataDialog()
    }
  },
  mounted () {
    this.ShowNodeData()
  }
}
</script>

<style lang="less">
.node-mes-config {
  .el-tab-pane {
    padding-top: 10px;
  }

  .mes-request-item {
    display: flow;
    flex-direction: row;
  }

  .el-dialog__body {
    padding-top: 0;
  }

  .el-dialog__header {
    background-color: #545c64;
    padding: 20px 10px;

    .el-dialog__title {
      color: #ffffff;
    }
  }
}
</style>
